<template>
  <div class="wrapper">
    <div class="recommed">
      推荐商家
    </div>
    <router-link tag="div" :to="'/store/' + 'id/'"
      class="store border-bottom"
      v-for="store of storeList" :key="store.id"
    >
      <img class="store-img" :src="store.imgUrl">
      <div class="info">
        <div class="title">{{store.name}}</div>
        <div class="score">
          <star :score="store.score"></star>
          {{store.score}} &nbsp;月售{{store.sale}}单
        </div>
        <div class="desc">{{store.desc}}</div>
      </div>
    </router-link>
  </div>
</template>

<script>
import Star from '../../common/Star'
export default {
  name: 'HomeRecommend',
  data () {
    return {
      storeList: [
        {
          id: '001',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 4.7,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/0/f0/71ef3220ff962d16d559767ac5b20jpeg.jpeg'
        }, {
          id: '002',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 4.9,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/c/cc/a0e70e92b62f9aaf61ce3f784acd3jpeg.jpeg'
        }, {
          id: '003',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 5,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/4/c9/fd557a9997461ed67626da3b6603djpeg.jpeg'
        }, {
          id: '004',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 3.7,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/6/07/513cc945b50c4f37ea7878d2c3b2cjpeg.jpeg'
        }, {
          id: '005',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 4.4,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/e/9c/636f2d9f9e193f9cf2ae459f2bb22jpeg.jpeg'
        }, {
          id: '006',
          name: '德克士',
          desc: '￥20起送 | 配送费 ￥5',
          score: 4.6,
          sale: 4557,
          imgUrl: 'https://fuss10.elemecdn.com/f/19/f1c4eed6e880600783194ed1ba4bcjpeg.jpeg'
        }
      ]
    }
  },
  components: {
    Star
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    .recommed
      height .9rem
      display flex
      justify-content center
      align-items center
      font-size .3rem
    .recommed:before,
    .recommed:after
      content ''
      display block
      width .4rem
      height .02rem
      background-color #999999
    .recommed:before
      margin-right .2rem
    .recommed:after
      margin-left .2rem
    .store
      display flex
      padding .25rem
      align-items center
      .store-img
        width 1.5rem
        height 1.5rem
        margin-right .2rem
      .info
        flex 1
        line-height 1
        .title
          font-size .33rem
          font-weight 500
        .desc
          font-size .2rem
        .score
          line-height .9rem
          font-size .25rem
</style>
